<template>
	<div>
		<div class="mainor_form">
			<div class="mainor_te">
				<el-button type="primary" @click="exportform">导出</el-button>
			</div>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="70px"
			>
				<el-form-item label="" prop="date_type" class="wid110">
					<el-select v-model="form.date_type" placeholder="请选择">
						<el-option label="配送日期" value="1"> </el-option>
						<el-option label="下单日期" value="2"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="" prop="establishTime">
					<el-date-picker
						v-model="establishTime"
						type="daterange"
						class="time220"
						:editable="false"
						unlink-panels
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd"
						:clearable="false"
						:picker-options="pickerOptions"
						@change="dateChange"
					/>
				</el-form-item>

				<el-form-item>
					<el-button class="reset marginLeft10" type="primary" @click="reset"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="getArticleList"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</div>
		<div class="main_table marginTop10" style="min-height: 550px">
			<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="list"
				element-loading-text="加载中"
				fit
				border
				highlight-current-row
				:header-cell-class-name="this.$verticaline"
			>
				<el-table-column label="大类名称" prop="category_name">
					<template slot-scope="scope">{{ scope.row.category_name }}</template>
				</el-table-column>

				<el-table-column label="配送金额" prop="send_money">
					<template slot-scope="scope">
						{{ scope.row.send_money | twoPlace }}
					</template>
				</el-table-column>
				<el-table-column label="退货金额" prop="return_money">
					<template slot-scope="scope">
						{{ scope.row.return_money | twoPlace }}
					</template>
				</el-table-column>

				<el-table-column label="成本金额" prop="cost">
					<template slot-scope="scope">
						{{ scope.row.cost | twoPlace }}
					</template>
				</el-table-column>
				<el-table-column label="利润金额" prop="profit">
					<template slot="header">
						<headerSortArrow
							label="profit"
							ref="arrow1"
							@handleSort="handleSort($event, 'arrow1')"
							>利润金额</headerSortArrow
						>
					</template>
					<template slot-scope="scope">
						{{ scope.row.profit | twoPlace }}
					</template>
				</el-table-column>
				<el-table-column label="利润率" prop="profit_rate">
					<template slot="header">
						<headerSortArrow
							label="profit_rate"
							ref="arrow2"
							@handleSort="handleSort($event, 'arrow2')"
							>利润率</headerSortArrow
						>
					</template>
					<template slot-scope="scope"> {{ scope.row.profit_rate }}% </template>
				</el-table-column>
			</el-table>
		</div>
		<div class="main_page boxdq">
			<div></div>
			<!-- 分页 -->
			<div class="main_page_r">
				<el-pagination
					:current-page="current.page"
					:page-sizes="[20, 30, 50, 100]"
					:page-size="limit"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount"
					background
					@size-change="changeLimit"
					@current-change="changePage"
				/>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		get_profitCategory,
		export_exportProfitCategory,
	} from "@/api/report/index";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { report_shortcuts } from "@/options/new_dateOption";
	import { parseTime, getNowMonth, exportMethod } from "@/utils/index";
	import headerSortArrow from "@/views/report/components/headerSortArrow";

	export default {
		components: { headerSortArrow },
		data() {
			return {
				pickerOptions: report_shortcuts,
				getNowMonth,
				exportMethod,
				// 时间
				parseTime,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				// 列表数据
				list: [],
				listLoading: false,
				// 搜索
				form: {
					type: "category",
					start_time: "",
					end_time: "",
					date_type: "1",
					order_by: "",
					order_type: "", //1升序  2降序
				},
				establishTime: [],
			};
		},
		created() {
			// 列表
			this.establishTime = this.getNowMonth();
			this.get_profitCategory();
		},
		methods: {
			get_profitCategory() {
				this.listLoading = true;
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.list_form(),
					this.current
				);
				get_profitCategory(data).then((res) => {
					if (res.errcode == 0) {
						this.list = res.data.list;
						this.totalCount = res.data.total;
					} else {
						this.$message.error(res.errmsg);
					}
					this.listLoading = false;
				});
			},
			// 重置
			reset() {
				this.$refs["userListFrom"].resetFields();
				this.establishTime = this.$route.params.date;
				this.get_profitCategory();
			},
			// 搜索
			getArticleList() {
				this.current.page = 1;
				this.get_profitCategory();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.get_profitCategory();
			},
			changePage(page) {
				this.current.page = page;
				this.get_profitCategory();
			},
			list_form() {
				let form = JSON.parse(JSON.stringify(this.form));
				form.start_time = this.establishTime[0] ? this.establishTime[0] : "";
				form.end_time = this.establishTime[1] ? this.establishTime[1] : "";
				return form;
			},
			// 排序
			handleSort(data, ref) {
				let arr = ["arrow1", "arrow2"].filter((e) => e != ref);
				arr.map((e) => {
					this.$refs[e].selected = false;
				});
				this.form.order_by = data.label;
				this.form.order_type = data.type;
				this.get_profitCategory();
			},
			// 导出
			exportform() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.list_form()
				);
				export_exportProfitCategory(data).then((res) => {
					this.exportMethod(res, "利润报表-商品分类");
				});
			},
			dateChange(val) {
				let start = new Date(val[0]).getTime();
				let end = new Date(val[1]).getTime();
				let diff = start - end;
				if (Math.abs(diff) > 3600 * 1000 * 24 * 60) {
					this.$message.warning("选择时间跨度不能超过两个月");
					this.establishTime = this.getNowMonth();
				}
				this.get_profitCategory();
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
	.mainor_form form {
		width: calc(100% - 180px);
	}
}

// 支付状态
.success {
	color: $green;
}
.unpaid {
	color: $colour_red;
}
// 订单状态
.order0 {
	color: $order_color1;
}
.order1 {
	color: $order_color2;
}
.order2 {
	color: $order_color3;
}
.order4 {
	color: $order_color4;
}
</style>
